<template>
	<div  class="LoginMaxboxs">
		<el-row>
			<el-col :span="24">
				<el-col :span="6" :xs="0" :sm="6" :md="6" :lg="6">
					<div class="LoginleBox">
						<p class="Loginle-p">锦锐科技</p>
						<p class="Loginle-p2">专业可信赖的云测试平台</p>
						<ul class="Loginle-ulli">
							<li class="li1">百万级全链路压力测试实时发压</li>
							<li class="li1">API管理、测试、监控全生命周期管理</li>
							<li class="li1">海量终端设备在线操控、调试</li>
							<li class="li1">私有化部署搭建私有后台、UI、终端测试平台</li>
							<li class="li1">行业测试专家提供多项专业测试服务</li>
						</ul>
					</div>
				</el-col>
				<el-col :span="18" :xs="24" :sm="18" :md="18" :lg="18">
					<div class="LoginriBox">
							<div class="loginform">
								<h5 class="logintitle">忘记密码</h5>
								
								<el-form :inline="true" :model="formInline" class="demo-form-inline" :label-position="labelPosition">
								  <el-form-item label="手机号码">
								    <el-input v-model="formInline.Phone" placeholder="请输入手机号" maxlength="11"  @input="handleInput"></el-input>
								  </el-form-item>
								  <el-form-item label="验证码">
								    <div class="yzmbox">
								    	<el-input v-model="formInline.YZM" placeholder="请输入验证码">
								    	</el-input>
								    	<el-button type="text" :disabled="counting" @click="startCountdown" class="hqyzmbut">{{ counting ?
								    	    `${countdown} 秒` : '获取验证码' }}</el-button>
								    </div>
								  </el-form-item>
								  <el-form-item label="设置新密码">
								    <el-input placeholder="6-18位必须包含数字和字母" maxlength="16" v-model="formInline.PassWord"
								          @input="handleInputPass" >
								    </el-input>
								  </el-form-item>
								  <el-form-item label="再次输入新密码">
								    <el-input placeholder="6-18位必须包含数字和字母" maxlength="16" v-model="formInline.PassWordTwo"
								          @input="handleInputTwoPass" >
								    </el-input>
								  </el-form-item>
								</el-form>
								<p class="qudlu" @click="GotoLoginbtn">去登录</p>
								
								
								
								
								<el-button class="LoginBut">确认修改</el-button>
							</div>
					</div>
					
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'top',
				 formInline: {
				          Phone:'',
				          YZM:'',
						  PassWord:'',
						  PassWordTwo:''
				        },
				counting: false,
				countdown: 60,
				checked:true,
			}
		},
		methods: {
			GotoLoginbtn(){
				this.$router.push({
						path: '/zmLogin'
					}
				
				)
			},
			startCountdown() {
			    if (this.counting) return;
			
			    this.counting = true;
			    let timer = setInterval(() => {
			        if (this.countdown > 0) {
			            this.countdown--;
			        } else {
			            this.counting = false;
			            this.countdown = 60;
			            clearInterval(timer);
			        }
			    }, 1000);
			},
			 handleInputPass() {
			      this.PassWord = this.PassWord.replace(/[\u4e00-\u9fa5]/g, ''); // 过滤中文字符
			    },
				handleInputTwoPass() {
				     this.PassWordTwo = this.PassWordTwo.replace(/[\u4e00-\u9fa5]/g, ''); // 过滤中文字符
				   },
			        handleInput() {
			            this.Phone = this.Phone.replace(/\D/g, ''); // 只保留数字
			        },
		}
	}
</script>
<style scoped lang="scss">
	
	.LoginMaxboxs{
		 width: 100%;
		height: 100vh; 
	}
	.LoginleBox{
		width: 100%;
		height: 100vh;
		background-image: url('../../assets/images/banner/loginlebgc.png');
		background-size: 100% 100vh;
		overflow: hidden;
		padding: 0 0 0 15%;
		.Loginle-p{
			margin-top: 167px;
			opacity: 1;
			font-family: Source Han Sans;
			font-size: 36px;
			font-weight: 500;
			color: #FFFFFF;
		}
		.Loginle-p2{
			font-family: Source Han Sans;
			font-size: 24px;
			color: #FFFFFF;
		}
		.Loginle-ulli{
			margin-top: 50px;
			.li1{
				color: #fff;
			}
		}
	}
	.LoginriBox{
		width: 100%;
		height: 100vh;
		background-color: #fafafa;
		display: flex;
		align-items: center;
		justify-content: center;
		.loginform{
			width: 480px;
			// height: 55%;
			border-radius: 20px;
			background-color: #fff;
			padding: 0 8%;
			.yzmbox{
				position: relative;
				margin-bottom: 20px;
			}
			.hqyzmbut{
				position: absolute;
				right:20px;
				top: 0;
				bottom: 0;
			}
			
			.logintitle{
				text-align: center;
				margin-top: 100px;
				font-size: 24px;
				color: #3d3d3d;
			}
			
			.LoginBut{
				width: 100%;
				background-color: #0457F2;
				border-radius: 5px;
				color: #fff;
				margin: 50px 0 30px 0;
			}
			.qudlu{
				cursor: pointer;
				font-size: 12px;
				text-align: right;
				color: #2966FF;
			}
			
		}
	}
	::v-deep .el-input__inner{
		background-color: #f1f1f1;
		height: 47px;
		border-radius: 10px;
		border: none;
		width: 100%;
	}
	::v-deep .el-form--inline .el-form-item {
		width: 100%;
		margin: 0;
	}
	::v-deep .el-form--label-top .el-form-item__label{
		padding: 0;
	}
	::v-deep .el-button--text{
		color: #2966FF;
	}
</style>